<template>
	<view class="shoppingCart page">
		<!-- 	#ifdef WEB-->
		<uninavbar title="购物车" leftIcon='' rightIcon='' rightText="" />
		<!-- 	 #endif -->
		<view v-if="CartList!=[]" class="CartList" v-for="(item,index) in CartList" @tap.stop="productDetails(item)">


			<view class="CartSelect" @tap.stop="CartListTap(item)">
				<view class="CartHide" v-if="!item.show&&item.publishStatus==1&&item.productStatus==0">

				</view>
				<view class="CartHide prohibit"
					v-else-if='item.publishStatus==0||item.productStatus==2||item.productStatus==1'>

				</view>
				<!-- 		//商品状态 0正常->1不可购买->2库存不足 -->

				<image v-else src="/static/images/productDetails/show.png" mode=""></image>

			</view>
			<view class="CartImg">
				<image :src="item.productPic" mode="widthFix"></image>
				<view class="CartImgMask" v-if='item.publishStatus==0||item.productStatus==2||item.productStatus==1'>
					<view class="CartType" v-if='item.productStatus==1'>
						不可购买
					</view>

					<view class="CartType" v-else-if='item.publishStatus==0'>
						商品下架
					</view>

					<view class="CartType" v-else-if='item.productStatus==2'>
						商品缺货
					</view>
				</view>
			</view>

			<view class="CartInfo">
				<view class="CartTitle">
					<view>
						<text>自营</text>
						{{item.productName}}
					</view>
					<image class="CartDet" src="/static/images/productDetails/det.png" mode=""
						@tap.stop="CartDet(item)">
					</image>
				</view>
				<view class="replenish" v-if='item.productStatus==1'>
					该商品不可购买
				</view>
				<view class="replenish" v-else-if='item.publishStatus==0'>
					抱歉，我们正在补货中

				</view>
				<view class="replenish" v-else-if='item.productStatus==2'>
					所选规格缺货，可重选
					<navigator class="replenishBtn" :url="'/pages/article/productDetails?id=' + item.productId">
						重选
					</navigator>
				</view>

				<view class="" v-if='item.publishStatus!=0&&item.productStatus==0'>
					¥{{item.currentPrice|unitConverter}}
				</view>
				<view class="CartDom" v-if='item.publishStatus!=0&&item.productStatus==0'>
					<view class="CartHands">
						<!-- 预估到手 ¥151 -->
					</view>

					<view class="CartNum">
						<view class="CartNumMinus" @tap.stop="minusNumDom(item)">
							-
						</view>
						<input type="text" v-model="item.quantity" @input="handleInput" />
						<view class="CartNumAdd" @tap.stop="addNumDom(item)">
							+
						</view>

					</view>

				</view>

			</view>
		</view>

		<view class="listNull" v-if="CartList.length==0">


			<image src="/static/images/productDetails/nullList.png" mode=""></image>
			<view class="" v-if="urlCode==401">
				<navigator url="/pages/common/login">
					<view>该用户未登录</view>
					<view class="listNullBtn">去登录</view>
				</navigator>
			</view>

			<view class="" v-else>
				<view> 购物车空空的噢～</view>
				<!-- <view class="listNullBtn" >去逛逛</view> -->
			</view>

		</view>

		<view class="Cartfoot" v-if="CartList.length>0">
			<view class="CartSelect" @tap="CartAll()">
				<view class="CartHide" v-if="!CartShow">

				</view>
				<image v-else src="/static/images/productDetails/show.png" mode=""></image>
				<text>全选</text>
			</view>
			<view class="CartfootInfo">
				<view class="">
					<view class="">
						<text class="amount">合计</text>(不含运费): <text class="money">¥{{amountMoney|unitConverter}}</text>
					</view>
					已优惠: ¥{{discount|unitConverter}}
				</view>
				<view class="CartfootBtn" @tap="settlement()">
					去结算
				</view>
			</view>
		</view>
		<uni-popup class="logisticsPopup" :show="popupShow" @close="popupShow = false" ref="popup" type="center">
			<view class="cancel">
				<view class="cancelTitle">
					是否该商品删除
				</view>
				<view class="cancelBtn">
					<view class="" @tap="popupShow = !popupShow">
						取消
					</view>
					<view class="cancelBtnOk" @tap="cartDelete()">
						确定
					</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import API from '@/config/newApi.js'
	import _ from 'lodash';
	import {
		debounce
	} from 'lodash'
	export default {
		components: {
			uninavbar,

		},
		data() {
			return {
				popupShow: false,
				discount: 0,
				CartShow: false,
				CartNum: 1,
				amountMoney: 0,
				CartIds: [],
				CartList: [],
				urlCode: null,
				updateCartId:"",
				updatequantity:0,
				cartDeleteId: "",
				 // 创建防抖函数，设置等待时间为1000毫秒（1秒）
				debouncedClickHandler: _.debounce(this.updateQuantity, 2000),
			}
		},
		onShow() {
			this.cartList()
		},
		methods: {
			minusNumDom(item) {
				if (item.quantity > 1) {
					item.quantity--
					if (item.show) {
						this.amountMoney -= item.currentPrice
						this.discount -= (item.price) - (item.currentPrice)
					}
				}
				this.updatequantity=item.quantity
			},
			addNumDom(item) {
				item.quantity++
				if (item.show) {
					this.amountMoney += item.currentPrice
					this.discount += (item.price) - (item.currentPrice)
				}
				 // 当按钮被点击时，调用防抖函数
			  this.updatequantity=item.quantity
			  this.updateCartId=item.id
			  this.debouncedClickHandler();
			},
			updateQuantity(){
				let data={
					id: this.updateCartId,
					quantity:this.updatequantity
				}
				API.updateQuantity(data).then(res => {
						if (res.code == 200) {
						
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			productDetails(item) {
				if (item.productStatus == 1) {
					this.$alert('商品不可购买');
					return false
				}
				if (item.publishStatus == 0) {
					this.$alert('商品已下架');
					return false
				}
				uni.navigateTo({
					url: '/pages/article/productDetails?id=' + item.productId
				});
			},
			cartList: function() {
				this.amountMoney = 0
				this.CartShow = false
				this.CartIds = []
				this.discount = 0
				API.cartList().then(res => {
						if (res.code == 200) {
							this.CartList = res.data
						}
						if (res.code == 401) {
							this.urlCode = res.code
						}
					})
					.catch(err => {
						console.log(err)
					})
			},

			CartDet(item) {
				this.popupShow = !this.popupShow
				this.cartDeleteId = item.id

			},
			cartDelete() {
				API.cartDelete(this.cartDeleteId).then(res => {

						if (res.code == 200) {
							this.$alert(res.message);
							this.cartList()
						}
						this.popupShow = !this.popupShow
					})
					.catch(err => {
						console.log(err)
					})
			},
			settlement() {
				if (this.CartIds.length > 0) {
					uni.navigateTo({
						url: '/order/orderIndex?CartIds=' + this.CartIds.join(',') + '&urlType=cart'
					});
				} else {
					this.$alert('请选择商品');
				}

			},
			CartAll() {
				this.CartShow = !this.CartShow
				this.CartIds = []
				if (!this.CartShow) {
					for (let item of this.CartList) {
						item.show = false
						this.amountMoney = 0
					}
				} else {
					for (let item of this.CartList) {
						if (item.productStatus == 0 && item.publishStatus == 1) {
							item.show = true
							this.amountMoney += (item.currentPrice * item.quantity)
							this.CartIds.push(item.id)
						}

					}
				}
				console.log(this.CartIds)
			},
			CartListTap(item) {
				if (item.productStatus == 1) {
					this.$alert('商品不可购买');
					return false
				}
				if (item.publishStatus == 0) {
					this.$alert('商品已下架');
					return false
				}

				if (item.productStatus == 2) {
					this.$alert('商品库存不足');
					return false
				}
				let showNum = 0
				this.CartIds = []
				this.amountMoney = 0
				this.discount = 0
				item.show = !item.show
				for (let item of this.CartList) {
					if (item.show == true) {
						showNum++
						this.amountMoney += (item.currentPrice * item.quantity)
						this.discount += (item.price * item.quantity) - (item.currentPrice * item.quantity)
						this.CartIds.push(item.id)
					}
				}
				if (showNum == this.CartList.length) {
					this.CartShow = true
				} else {
					this.CartShow = false
				}
				console.log(this.CartIds)
			},
		}
	}
</script>

<style scoped lang="scss">
	.shoppingCart {
		padding: 40rpx;
		overflow: auto;
		height: calc(100vh - 380rpx);
		padding-top: 120rpx;
	}

	.CartList {
		display: flex;
		padding: 40rpx 20rpx;
		background-color: #fff;
		border-radius: 16px;
		margin-bottom: 30rpx;
		align-items: flex-start;

		.CartImg {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			background-color: #f1f1f1;
			border-radius: 10rpx;
			overflow: hidden;
			border: 2rpx solid #f1f1f1;
			margin-right: 10rpx;

			.CartImgMask {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.2);
			}

			.CartType {
				position: absolute;
				bottom: 0;
				z-index: 3;
				background: rgba(0, 0, 0, 0.4);
				color: #fff;
				width: 100%;
				font-size: 22rpx;
				text-align: center;
			}
		}

		.CartInfo {
			flex: 1;
		}

		.replenish {
			font-size: 24rpx;
			color: #999;
			position: relative;
			top: 40rpx;
			overflow: hidden;

			.replenishBtn {
				float: right;
				border: 2rpx solid #6954D5;
				color: #6954D5;
				padding: 0rpx 20rpx;
				border-radius: 10rpx;
				font-size: 20rpx;
				cursor: pointer;
			}
		}

		.CartDom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.CartHands {
				font-size: 20rpx;
				color: #999;
			}
		}

		image {
			width: 100%;
			margin-right: 30rpx;
		}

		.CartTitle {
			display: flex;
			font-size: 22rpx;
			align-items: flex-start;
			justify-content: space-between;
			display: -webkit-box;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			height: 80rpx;
			padding-right: 40rpx;
			position: relative;

			text {
				background-color: #6954D5;
				color: #fff;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				font-size: 20rpx;
				margin-right: 10rpx;
			}


		}

		.CartDet {
			width: 38rpx;
			height: 38rpx;
			margin-right: 0;
			margin-left: 35rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.CartNum {
			display: flex;
			text-align: center;
			border: 2rpx solid #f1f1f1;
			width: 180rpx;
			font-size: 36rpx;
			align-items: center;
			border-radius: 16rpx;

			.CartNumMinus,
			.CartNumAdd {
				padding: 0 20rpx;
			}

			input {
				font-size: 24rpx;
			}
		}
	}

	.CartSelect {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
		margin-top: 60rpx;

		.CartHide {
			width: 30rpx;
			height: 30rpx;
			border: 2rpx solid #f1f1f1;
			border-radius: 50%;
		}

		.prohibit {
			background-color: #f1f1f1;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			border: 2rpx solid #6954D5;
			border-radius: 50%;
		}
	}

	.Cartfoot {
		background-color: #fff;
		position: absolute;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		box-sizing: border-box;
		max-width: 800rpx;
		margin: auto;
		z-index: 3;

		.CartSelect {
			display: flex;
			width: 100rpx;
			align-items: center;
			margin-top: 0;
			font-size: 24rpx;
			color: #666;

			text {
				margin-left: 10rpx;
			}
		}

		.CartfootInfo {
			display: flex;
			align-items: center;
			color: #999;
			text-align: right;
			font-size: 22rpx;

			.amount {
				color: #666;
			}

			.money {
				color: #6954D5;
				font-size: 32rpx;
			}

			.CartfootBtn {
				width: 152rpx;
				height: 70rpx;
				background: #6954D5;
				border-radius: 20px;
				text-align: center;
				color: #fff;
				line-height: 70rpx;
				margin-left: 30rpx;

			}
		}

	}

	.listNull {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #999;

		.listNullBtn {
			width: 180rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 2rpx solid #6954D5;
			line-height: 80rpx;
			color: #6954D5;
			margin-top: 40rpx;
		}

	}
</style>